<template>
<div class="paybill">
  <div class="main_contain">
    <div class="input_contain">
      <span class="searchTips">缴费用户: </span>
      <el-input clearable placeholder="请输入缴费用户" v-model="search" style="width: 300px"></el-input>
      <el-button type="primary" class="searchBtn" @click="getBills">查找</el-button>
    </div>
    <div class="bill_contain">
      <el-table  :data="tableList" v-if="search!==''" border style="width: 100%" >
        <el-table-column prop="id" label="账单id"  align="center"></el-table-column>
        <el-table-column prop="billDate" align="center" label="缴费日期"></el-table-column>
        <el-table-column prop="appoPrice" label="挂号费(已缴纳)" align="center"></el-table-column>
        <el-table-column prop="price" label="材料费" align="center"></el-table-column>
        <el-table-column  align="center" label="操作">
          <template v-slot="scope">
            <el-button @click="payCardShow(scope.row)" type="success" size="small" class="hvr-grow">
              <i style="padding-right: 5px" class="fa fa-yen fa-lg"/>缴费
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-empty v-else description="暂无数据" image-size="250"></el-empty>
    </div>

    <transition name="billAnime">
      <el-card :shadow="true" class="bill_info" v-show="showCard">
        <template #header>
          <div class="card-header">
            <span style="color: #00a4ff;cursor: default">账单详情</span>
          </div>
        </template>
        <div>
          <el-descriptions direction="vertical" :column="2" border >

            <el-descriptions-item label="账单id" label-align="center" align="center">{{selectBill.id}}</el-descriptions-item>
            <el-descriptions-item label="总费用(RMB)" label-align="center" align="center">{{selectBill.total}}</el-descriptions-item>

            <el-descriptions-item label="挂号费" label-align="center" align="center">
              <span v-if="selectBill.appoPrice!=null">已缴</span>
              <span v-else>未缴</span>
            </el-descriptions-item>

            <el-descriptions-item label="材料费" label-align="center" align="center">
              <span v-if="selectBill.billDate===''||selectBill.billDate===undefined||selectBill.billDate===null">未缴</span>
              <span v-else>已缴</span>
            </el-descriptions-item>

            <el-descriptions-item label="明细" align="left" label-align="center" :span="4">
              <div style="display: flex;align-items: center;justify-content: space-between" >
                <el-tag effect="plain" v-if="selectBill.appoPrice !== null">挂号费</el-tag>
                <el-divider></el-divider>
                <span>¥{{selectBill.appoPrice}}</span>
              </div>
              <div style="display: flex;align-items: center;justify-content: space-between" v-if="selectBill.price!==null">
                <el-tag effect="plain">材料费</el-tag>
                <el-divider></el-divider>
                <span>¥{{selectBill.price}}</span>
              </div>
            </el-descriptions-item>
          </el-descriptions>
        </div>

        <div class="btn-contain">
          <el-button class="hvr-push" type="success" @click="payCash">现金支付</el-button>
<!--          <el-button class="hvr-push" type="primary">二维码支付</el-button>-->
          <el-button id="confirm_btn" class="hvr-push" type="warning" @click="showCard = false">返回</el-button>
        </div>

      </el-card>
    </transition>

  </div>
</div>
</template>

<script>
import {payBillFromReception, receptionGetBills} from "../../api/api";
import {ElMessage} from "element-plus";

export default {
  name: "paybill",

  mounted() {
    this.tableList = []
  },
  data(){
    return{
      search: '',
      tableList: [],
      selectBill: {},
      showCard:false,
    }
  },
  methods:{

    payCardShow(row){
      this.selectBill = row
      if (this.selectBill.price === null){
        ElMessage.warning({
          type: 'warning',
          message: '正在计算材料费，请稍后再缴费'
        })
        return -1
      }
      else if (this.selectBill.billDate !==null){
        ElMessage.warning({
          type: 'warning',
          message: '当前账单已经缴费'
        })
      }else{
        this.showCard = !this.showCard
        this.selectBill.total = this.selectBill.appoPrice + this.selectBill.price
      }
    },

    payCode(){

    },
    payCash(){
      const tokenValue = JSON.parse(localStorage.getItem("loginData")).tokenValue
      payBillFromReception({
        IdNo: this.search,
        bid: this.selectBill.id
      },{
        "satoken": tokenValue
      })
      .then(res=>{
        //console.log(res)
        ElMessage.success({
          type: 'success',
          message: res.msg
        })
        this.showCard = !this.showCard
      })
      .catch(err=>{
        console.log(err)
        ElMessage.error({
          type: 'error',
          message: err
        })
      })
    },
    getBills(){
      const tokenValue = JSON.parse(localStorage.getItem("loginData")).tokenValue
      receptionGetBills({
        'idNo':this.search
      },{
        "satoken": tokenValue,
      })
      .then(res=>{
        console.log('---------------------------------------------------------')
        console.log(res)
        this.tableList = res.data
        if (res.code === 200){
          ElMessage.success({
            type:'success',
            message: res.msg
          })

        }else{
          ElMessage.warning({
            type: 'warning',
            message: res.msg
          })
        }
      })
      .catch(err=>{
        console.log(err)
        ElMessage.error({
          type: 'error',
          message: err
        })
      })
    }
  }

}
</script>

<style scoped>
.bill_info{
  position: fixed;
  width: 600px;
  height: auto;
  top: 25%;
  left: 40%;
  z-index: 5;
  background: #d9ecff;
}
.billAnime-enter-active{
  animation: fadeInLeft 1s;
}
.billAnime-leave-active{
  animation: fadeOutRight 1s;
}

.searchTips{
  letter-spacing: 0.15em;
  font-weight: bold;
  font-size: 18px;
  display: inline-block;
  margin-top: 10px;
  margin-right: 10px
}
.searchBtn{
  position: relative;
  left: 50px;
}
.main_contain{
  display: flex;
  flex-flow: column;
  align-items: center;
  justify-content: space-between;
}
.input_contain{
  width: auto;
  margin: 0 auto;
  display: flex;
  padding-top: 50px;
}
.bill_contain{
  width: 100%;
  height: auto;
  margin-top: 100px;
}
.paybill{
  position: relative;
  height: 100%;
  width: 100%;

}
</style>